<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>H+ 后台主题UI框架 - 基本表单</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css-v=3.3.5.css"
          tppabs="http://www.zi-han.net/theme/hplus/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="css/font-awesome.min.css-v=4.4.0.css"
          tppabs="http://www.zi-han.net/theme/hplus/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="css/plugins/iCheck/custom.css"
          tppabs="http://www.zi-han.net/theme/hplus/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="css/animate.min.css" tppabs="http://www.zi-han.net/theme/hplus/css/animate.min.css"
          rel="stylesheet">
    <link href="css/style.min.css-v=4.0.0.css" tppabs="http://www.zi-han.net/theme/hplus/css/style.min.css?v=4.0.0"
          rel="stylesheet">
    <base target="_blank">
    <link rel="stylesheet" type="text/css" href="./layui/css/layui.css" />
    <link rel="stylesheet" href="/static/layui/css/modules/layer/default/layer.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css">
    <style>

    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h3 style="font-weight: 600;margin-top: 0;">物品展示</h3>
                </div>
                <div class="ibox-content">
                    <div id="box" class="ui three column grid">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
                <script src="js/jquery.min.js-v=2.1.4"
                        tppabs="http://www.zi-han.net/theme/hplus/js/jquery.min.js?v=2.1.4"></script>
                <script src="js/bootstrap.min.js-v=3.3.5"
                        tppabs="http://www.zi-han.net/theme/hplus/js/bootstrap.min.js?v=3.3.5"></script>
                <script src="js/content.min.js-v=1.0.0"
                        tppabs="http://www.zi-han.net/theme/hplus/js/content.min.js?v=1.0.0"></script>
                <script src="js/plugins/iCheck/icheck.min.js"
                        tppabs="http://www.zi-han.net/theme/hplus/js/plugins/iCheck/icheck.min.js"></script>
                <script type="text/javascript" src="../../../tajs.qq.com/stats-sId=9051096"
                        tppabs="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
                <script src="./layui/layui.js" type="text/javascript" charset="utf-8"></script>
                <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js"></script>
                <script>
                    $(document).ready(function () {
                        // appendThing();
                        $.ajax({
                            type: "POST",
                            url: "/user/getThings",
                            data: {

                            },
                            success: function(msg){
                                console.log(msg)
                                for (let i=0;i<=msg.length;i++){
                                    appendThing(msg[i].name,msg[i].image)
                                }
                            }
                        });
                    })

                //    添加物品到页面
                    function appendThing(name,image){
                        // let name="帐篷";
                        // let image="img/1.png";

                        let card="<div class=\"column\" style='float: left'>\n" +
                            "                            <div class=\"ui fluid card\">\n" +
                            "                                <div class=\"image\" style='border-radius: 10px;margin-right: 10px'>\n" +
                            "                                    <img style='width: 380px;height: 270px;border-radius: 10px' src="+image+">\n" +
                            "                                </div>\n" +
                            "                                <div class=\"content\" style='padding: 15px;text-align: center'>\n" +
                            "                                    <a class=\"header\" style='font-size: 16px'>"+name+"</a>\n" +
                            "                                </div>\n" +
                            "                            </div>\n" +
                            "                        </div>"
                        $("#box").append(card);
                    }
                </script>

</body>
</html>
